<div class="center">
  @for (i of [0, 1, 2, 3, 4]; track $index) {
    <app-angular-img [@enter]="{ value: '', params: { delay: i * 150 } }" (@enter.done)="hueState = !hueState"></app-angular-img>
  }
</div>

<button nz-button nzType="default" [@btnEnter] [@btnEnterFadeIn] (click)="animate()">在搞一下</button>

<div [@flash]="flashState">
  <div>
    @for (letter of text1; track $index; let last = $last) {
      <div
        class="letter"
        [@enterLetterAnim1]="{ value: '', params: { delay: 1500 + $index * 100 } }"
        [@hueLetter]="{ value: hueState, params: { delay: $index * 50 } }"
        [@letterAnim1]="{ value: animationState, params: { delay: $index * 30 } }"
        (@letterAnim1.done)="last && (hueState = !hueState)"
      >
        {{ letter }}
      </div>
    }
  </div>

  <div>
    @for (letter of text2; track $index; let last = $last) {
      <div
        class="letter"
        [@enterLetterAnim2]="{ value: '', params: { delay: 6000 + getDelay($index, text2.length) } }"
        [@hueLetter]="{ value: hueState, params: { delay: $index * 75 } }"
        [@letterAnim2]="{ value: animationState, params: { delay: 500 + $index * 30 } }"
        (@enterLetterAnim2.done)="last && (hueState = !hueState)"
      >
        {{ letter }}
      </div>
    }
  </div>

  <div>
    @for (letter of text3; track $index; let first = $first) {
      <div
        class="letter"
        [@enterLetterAnim3]="{ value: '', params: { delay: 8000 + text3.length * 100 - $index * 100 } }"
        [@hueLetter]="{ value: hueState, params: { delay: $index * 150 } }"
        [@letterAnim3]="{ value: animationState, params: { delay: 1000 + $index * 30 } }"
        (@enterLetterAnim3.done)="first && (flashState = !flashState)"
      >
        {{ letter }}
      </div>
    }
  </div>
</div>
